<template>
  <Drawer
    :maskClosable="true"
    :closable="true"
    width="80%"
    v-model:visible="visible"
    title="组件关系图"
    :destroyOnClose="true"
  >
    <div id="chartRef" :style="{ height: '100%', width: '100%' }"></div>
  </Drawer>
</template>
<script lang="ts" setup>
/* eslint-disable */
import { nextTick, ref } from 'vue';
import { basicProps } from './props';
import * as echarts from 'echarts';
import { Drawer } from 'ant-design-vue';
defineProps({
  ...basicProps,
});
const borderColorList = ['#04f2a7', '#82dffe', '#b158ff', '#ef143e', '#FFFFE6', '#fff421', '#65ff1b'];
const pointNameList = ref([]);
const relationsList = ref([]);

const visible = ref(false);

const openDrawer = async (mapPoint: any, mapRelations: any) => {
  visible.value = true;
  let count = 0;
  pointNameList.value = [];
  relationsList.value = [];
  mapPoint.value.forEach((item) => {
    pointNameList.value.push({
      name: item.componentName,
      value: '组件节点',
      symbolSize: 100,
      draggable: true,
      itemStyle: {
        normal: {
          borderColor: borderColorList[count % 7],
          borderWidth: 6,
          shadowBlur: 6,
          shadowColor: borderColorList[count % 7],
          color: '#001c43',
        },
      },
      category: 0,
    });
    count++;
  });
  mapRelations.value.forEach((item) => {
    relationsList.value.push({
      source: item.upstreamComponentName,
      target: item.downstreamComponentName,
      value: '上游组件: ' + item.upstreamComponentName + '; 下游组件' + item.downstreamComponentName,
    });
  });
  nextTick(() => {
    let options = {
      backgroundColor: '#001c43',
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      color: ['#83e0ff', '#45f5ce', '#b158ff'],
      series: [
        {
          type: 'graph',
          layout: 'force',

          force: {
            repulsion: 3500,
            edgeLength: 200,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              fontSize: 10,
            },
          },
          data: pointNameList.value,
          links: relationsList.value,
          edgeSymbol: ['none', 'arrow'],
          lineStyle: {
            normal: {
              color: '#45f5ce',
              opacity: 6,
              width: 5,
              curveness: 0.1,
            },
          },
        },
      ],
    };
    // 设置时间间隔,防止dom错误渲染
    setTimeout(async () => {
      let chartDom = document.getElementById('chartRef');
      let myChart = echarts.init(chartDom);
      options && myChart.setOption(options);
    }, '100');
  });
};

defineExpose({ openDrawer });
</script>
